<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!-- 预览页面 -->
<div id="player" style="width:100%;height:300px;display: none">
    <script type="text/javascript" charset="utf-8" src="//yuntv.letv.com/player/live/blive.js" ></script>
    <script>
        var player = new CloudLivePlayer();
        player.init({activityId: '${activityId}'});
    </script>
</div>
<div id="detail-content">
    <script type="text/html" id="tpl-content">
        <div class="live-detail-wrap">
            <!--video-box-->
            <div class="video-box">
                <img id="face_img" src="<%=basePath%>/app/images/live.png" alt="" />
                {{if resultList.source_url}}
                <iframe style="display: none;" width="100%" id="vodPlayer" src="{{handleVideoUrl(resultList.source_url)}}" scrolling=no
                        frameborder=0 onload="javascript:$(this).height(document.body.clientWidth*9/16)"></iframe>
                {{/if}}
            </div>
            <!--/video-box-->
            <!--live-status-->
            <div class="live-status">
                {{detailLiveStatus resultList.live_start_time resultList.live_end_time resultList.source_url}}
                <span class="number">{{resultList.reading}}人参与</span>
            </div>
            <!--/live-status-->
            <!--notice-->
            {{if 'undefined' !== typeof resultList.actor_comment && resultList.actor_comment.length > 0}}
            <div class="notice">
                <div class="inner">
                    <ul class="list" id="noticeList">
                        {{each resultList.actor_comment as value i}}
                        <li><a>{{value.comment}}</a></li>
                        {{/each}}
                    </ul>
                </div>
            </div>
            {{/if}}
            <!--/notice-->
            <!--detail-nav-->
            <div class="detail-nav">
                <ul class="list" id="detailNav">
                    <li class="active" data-target="#panel01">直播介绍</li>
                    <li data-target="#panel02" id="hotComment">热门评论</li>
                </ul>
            </div>
            <!--/detail-nav-->
            <!--detail-panel-->
            <div class="detail-content-list">
                <div class="panel show" id="panel01">
                    <ul class="intro">
                        <li>
                            <div class="tit">直播主题</div>
                            <div class="cont">{{resultList.title}}</div>
                        </li>
                        <li>
                            <div class="tit">时间</div>
                            <div class="cont">{{dataFormat(resultList.live_start_time,'MM月dd日 hh:mm')}} - {{dataFormat(resultList.live_end_time,'MM月dd日 hh:mm')}}</div>
                        </li>
                        <li>
                            <div class="tit">演员</div>
                            <div class="cont">{{resultList.actor}}</div>
                        </li>
                        <li>
                            <div class="tit">视频简介</div>
                            <div class="cont">{{resultList.abstract_info}}</div>
                        </li>
                    </ul>
                </div>
                <div class="panel" id="panel02">
                    <!--comment-list-->
                    <div class="comment-list" id="commentList">
                        <div class="content">
                            <!--comment-list-row-->
                            {{include 'tpl-comment' resultList.comment}}
                            <!--/comment-list-row-->
                        </div>
                        <div class="more-box">
                            <a href="javascript:;" id="loadCommentMore">加载更多</a>
                        </div>
                    </div>
                    <!--/comment-list-->
                </div>
            </div>
            <!--/detail-panel-->
        </div>
        <!--/live-detail-wrap-->
        <!--detail-comment-area-->
        <div class="detail-comment-area">
            <div class="item-list">
                <a class="item bnt-back"><i class="icon icon-back"></i></a>
                <a class="item" id="commentWrite"><i class="icon icon-write"></i></a>
                <a class="item" href="#commentList" id="comment"><i class="icon icon-comment"></i><span class="number">{{resultList.comment_num}}</span></a>
                <a class="item {{if resultList.collection == 1}}hover{{/if}}" id="commentStar"><i class="icon icon-star"></i></a>
                <a class="item" id="commentReward"><i class="icon icon-reward"></i></a>
            </div>
            <form action="#" method="post" class="upload-comment">
                <div class="btn-box">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="button" class="btn-submit">发布</button>
                </div>
                <textarea class="tta" rows="5" placeholder="请输入内容" id="inputComment"></textarea>
            </form>
            <div class="waterMark"></div>
        </div>
    </script>
</div>

<!--reward-wrap-->
<div class="reward-wrap" id="rewardWrap">
    <div class="top-thumb"><img src="<%=basePath%>/app/images/reward_top.png" alt="" /></div>
    <!--check-list-->
    <div class="check-list">
        <div class="inner">
            <div class="item active" data-price="5"><p>5元</p></div>
            <div class="item" data-price="10"><p>10元</p></div>
            <div class="item" data-price="20"><p>20元</p></div>
            <div class="item" data-price="50"><p>50元</p></div>
            <div class="item" data-price="100"><p>100元</p></div>
            <div class="item" data-price="200"><p>200元</p></div>
        </div>
    </div>
    <!--/check-list-->
    <!--price-box-->
    <div class="price-box">
        <a class="other-price">其他金额</a>
        <br />
        <input type="number" name="price" value="5" class="ipt-price" id="lastPrice" placeholder="请输入打赏金额" />
    </div>
    <!--/price-box-->
    <!--button-box-->
    <div class="button-box">
        <button type="button" class="btn-submit">立即打赏</button>
        <button type="button" class="btn-back">返回</button>
    </div>
    <!--/button-box-->
</div>
<!--/reward-wrap-->

<!-- 评论 -->
<script type="text/html" id="tpl-comment">
    {{each list as value i}}
    <div class="comment-list-row">
        <div class="item left">
            <div class="head" style="background-image: url('{{if value.head_url}}{{value.head_url}}{{/if}}'"></div>
        </div>
        <!--right-->
        <div class="item right">
            <div class="top-info">
                <a class="clickGood {{if value.is_up == 1}}hover{{/if}}" data-up="{{value.is_up}}" data-id="{{value.id}}">{{value.fabulous_num}}</a>
                <h3><span class="username">{{value.user_name}}</span><span>{{formatTime value.create_time}}</span></h3>
            </div>
            <div class="cont">
                <p {{if value.is_admin==1}}style="color:red;"{{/if}}>{{value.comment}}</p>
            </div>
            {{if value.reply}}
            <div class="reply">
                <p>小编：{{value.reply}}</p>
            </div>
            {{/if}}
        </div>
        <!--/right-->
    </div>
    {{/each}}
</script>

<script>
    var _offset = 1, _total = 0;
    //文字滚动
    function scrollNoticeText(){
        var _list = $('ul#noticeList'), _item = _list.find('li'), _size = _item.size(), _height = _item.eq(0).height(), _index = 0, _active = 'active';
        _item.eq(_index).addClass(_active);
        //添加计时器
        setInterval(function(){
            _index = _index + 1 >= _size ? 0 : _index + 1;      //索引值 自增
            _item.removeClass(_active);
            _item.eq(_index).addClass(_active);
            //列表移动
            _list.css({
                'top' : -(_index * _height)
            });
        }, 5000);
    }

    //加载评论相关事件
    function loadCommentEvent(){
        var _commentNav = mui('div.detail-comment-area'),_body = $('html, body');

        //- - - - - - - - - - 评论列表 - - - - - - - - - -
        var _commentFlag = false;
        //滑动到评论列表位置
        _commentNav.on('tap', '#comment', function(){
            if(_commentFlag) return;

            _commentFlag = true;
            var _hotComment = $('#hotComment');

            _hotComment.trigger('tap');

            setTimeout(function(){
                var _target = $(_hotComment);
                if('undefined' !== typeof _target.get(0)){
                    mui.scrollTo(_target.offset().top - 10, 200);
                }
                _commentFlag = false;
            }, 200);
        });


    }

    //加载tab导航切换相关事件
    function loadNavEvent(){
        var _detailNav = $('ul#detailNav'), _item = _detailNav.find('li'), _active = 'active', _targets = [];

        _item.each(function(){
            _targets[_targets.length] = $(this).data('target');
        });

        function hideAll(){
            if(_targets.length > 0){
                for(var i in _targets){
                    var _target = $(_targets[i]);
                    if('undefined' !== typeof _target.get(0)){
                        _target.hide();
                    }
                }
            }
            //end
        }

        _detailNav.on('tap', 'li', function(){
            var _target = $(_targets[$(this).index()]);
            if('undefined' !== typeof _target.get(0)){
                hideAll();
                _item.removeClass(_active);
                _target.show();
                $(this).addClass(_active);
            }
        });
    }


    function loadPlayerEvent(data) {
        mui('body').on('tap', 'div.video-box', function () {
            var st = new Date(parseInt(data.resultList.live_start_time));
            var et = new Date(parseInt(data.resultList.live_end_time));
            var now = new Date();
            if (now.getTime() > st.getTime() && now.getTime() < et.getTime()) {
                $("#player").show();
                $("#face_img").hide();
                $("#vodPlayer").hide();
            } else if (now.getTime() > et.getTime() && !isEmpty(data.resultList.source_url)) {
                $("#player").hide();
                $("#face_img").hide();
                $("#vodPlayer").css("display","block");
            }
        });
    }

    function loadEvent() {
        //加载详情数据
        $.ajax({
            url: _basePath + "app/live/detail",
            data: {id: ${id} },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    if(isEmpty(data.resultList.third_url)){
                        var _html = template('tpl-content', data);
                        _total = data.resultList.comment.totalPage;
                        $("#detail-content").append(_html).find("section").css("width", "100%");
                        //评论事件
                        loadCommentEvent();
                        scrollNoticeText();
                        loadNavEvent();
                        loadPlayerEvent(data);
                    }else{
                        mui.openWindow({
                            url:data.resultList.third_url
                        })
                    }
                }else{
                    mui.toast("获取直播详情出错");
                }
            }
        });

        //加载更多评论列表
        $(document).on('tap', '#loadCommentMore', function(){
            if(_offset < _total){
                $.ajax({
                    url: _basePath + "app/live/commentList",
                    data: {
                        live_id: ${id},
                        curPage: _offset + 1
                    },
                    dataType: 'json',
                    success: function (data) {
                        if(typeof data.resultList != undefined && data.resCode == 0){
                            var _html = template('tpl-comment', data);
                            $(".content").append(_html);
                            _offset++;
                            _total = data.resultList.totalPage;
                        }
                    }
                })
            }else{
                mui.toast("已经没有数据了");
            }
        });

    }

    //
    $(function(){
        loadEvent();
    });
</script>